import EchartsWrap from '@/components/widgets/EchartsWrap';
import React, { useEffect, useState } from 'react';
import { connect } from 'umi';


const option = {
  // title : '',
  tooltip: {},
  legend: {
    left: 'left',
    data: ['强', '中', '弱'],
    textStyle: {
      color: '#ccc',
    },
  },
  backgroundColor: 'transparent',
  geo: {
    map: 'china',
    show: true,
    roam: false,
    label: {
      emphasis: {
        show: false,
      },
    },
    itemStyle: {
      opacity: 0,
    },
    layoutCenter: ['50%', '50%'],
    layoutSize: '80%',
  },
  radar: [
    {
      indicator: [
        {
          text: '',
          max: 100,
        },
        {
          text: '',
          max: 100,
        },
        {
          text: '',
          max: 100,
        },
        {
          text: '',
          max: 100,
        },
        {
          text: '',
          max: 100,
        },
        {
          text: '',
          max: 100,
        },
        {
          text: '',
          max: 100,
        },
        {
          text: '',
          max: 100,
        },
      ],
      splitArea: {
        areaStyle: {
          color: ['transparent'],
        },
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)',
        },
      },
      splitLine: {
        lineStyle: {
          color: '#d2d2d4',
        },
      },
    },
  ],
  series: [
    // {
    //     type: 'map',
    //     map: 'china',
    //     geoIndex: 1,
    //     aspectScale: 0.75, //长宽比
    //     showLegendSymbol: true, // 存在legend时显示
    //     label: {
    //         normal: {
    //             show: false,
    //         },
    //         emphasis: {
    //             show: false,
    //             textStyle: {
    //                 color: '#fff'
    //             }
    //         }
    //     },
    //     roam: false,
    //     itemStyle: {

    //         normal: {
    //             opacity: 0,
    //             // areaColor: '#031525',
    //             // borderColor: '#3B5077',
    //             // borderWidth: 1
    //         },
    //         emphasis: {
    //             // areaColor: '#0f2c70'
    //         }
    //     },
    //     data: [{
    //         name: '北京',
    //         value: 21300
    //     }]
    // },
    {
      name: '其他规模的项目',
      type: 'scatter',
      coordinateSystem: 'geo',
      // data: convertData(data),
      symbolSize: 10,
      label: {
        normal: {
          formatter: '{b}',
          position: 'right',
          show: false,
        },
        emphasis: {
          show: false,
        },
      },
      itemStyle: {
        normal: {
          color: 'rgba(61, 251, 255, 1)',
        },
      },
      zlevel: 3,
    },
    {
      name: '大型项目',
      type: 'scatter',
      coordinateSystem: 'geo',
      symbolSize: 10,
      showEffectOn: 'render',
      rippleEffect: {
        brushType: 'stroke',
      },
      hoverAnimation: true,
      label: {
        normal: {
          formatter: '{b}',
          position: 'right',
          show: false,
        },
      },
      itemStyle: {
        normal: {
          color: 'rgba(87, 78, 255, 1)',
        },
      },
      zlevel: 4,
    },
    {
      type: 'radar',
      lineStyle: {
        normal: {
          color: '#5b9bd5',
          width: 4,
        },
      },
      itemStyle: {
        // color: '#5b9bd5', //顶点的颜色
      },
      data: [],
    },
  ],
};
const ProjectSize = ({ projList }) => {
  const [curData, setCurData] = useState(option);
  useEffect(() => {
    if (!projList.length) return;

    const newOption = JSON.parse(JSON.stringify(option));

    const [otherArr, bigProjArr] = projList.reduce(
      (r, { lat, name, lng, prjSize, areaCode }) => {
        r[prjSize - 1 > 0 ? 0 : 1].push({ name, value: [lng, lat, areaCode] });
        return r;
      },
      [[], []],
    );

    newOption.series[0].data = otherArr;
    newOption.series[1].data = bigProjArr;

    setCurData(newOption);
  }, [projList]);
  return (
    <EchartsWrap
      option={curData}
      width={350}
      opts={{ height: 240 }}
      style={{ height: 240 }}
      map={'china'}
    />
  );
};

// export default ProjectSize;
export default connect(({ kanban }) => {
  return { projList: kanban.projList };
})(ProjectSize);
